<template>
    <div class="app">
        <myNavbar title="订单详情"></myNavbar>
        <list>
            <cell>
                <div class="details_box">
                    <image class="details_box_header_bg" src="http://cdn.rzico.com/v4.0/mine-bg.png"></image>
                    <div class="details_status">
                        <text class="details_status_title">{{orderForm.statusDescr}}</text>
                        <text v-if="orderForm.statusDescr =='待付款'" class="details_status_subtitle">超时30分钟未付款，订单将自动取消</text>
                        <text v-if="orderForm.statusDescr =='待发货'" class="details_status_subtitle">订单已确认，卖家会尽快安排发货</text>
                        <text v-if="orderForm.statusDescr =='待收货'" class="details_status_subtitle">卖家已发货，超时未签收系统将自动确认</text>
                        <text v-if="orderForm.statusDescr =='待评价'" class="details_status_subtitle">交易已完成，您的五星好评是最大支持</text>
                    </div>
                    <div>
                        <div class="details_information" v-if="orderLog.length !=0">
                            <div class="details_information_content" v-for="(item,index) in orderLog">
                                <div class="details_information_left">
                                    <div :class="[index == 0 ?'details_information_round_current':'details_information_round']">

                                        <text v-if="item.type==0"
                                              :class="[index==0?'details_information_icon_current':'details_information_icon']" >&#xe606;</text>
                                        <text v-if="item.type==1"
                                              :class="[index==0?'details_information_icon_current':'details_information_icon']">&#xe631;</text>
                                        <text v-if="item.type==2 || item.type==7"
                                              :class="[index==0?'details_information_icon_current':'details_information_icon']">&#xe66e;</text>
                                        <text v-if="item.type==3"
                                              :class="[index==0?'details_information_icon_current':'details_information_icon']">&#xe69f;</text>
                                        <text v-if="item.type==4"
                                              :class="[index==0?'details_information_icon_current':'details_information_icon']">&#xe6ea;</text>
                                        <text v-if="item.type==5"
                                              :class="[index==0?'details_information_icon_current':'details_information_icon']">&#xe625;</text>
                                        <text v-if="item.type==6"
                                              :class="[index==0?'details_information_icon_current':'details_information_icon']">&#xe614;</text>
                                        <text v-if="item.type==8"
                                              :class="[index==0?'details_information_icon_current':'details_information_icon']">&#xe664;</text>
                                        <text v-if="item.type==9"
                                              :class="[index==0?'details_information_icon_current':'details_information_icon']">&#xe612;</text>
                                    </div>
                                    <div v-if="index+1 != orderLog.length"
                                         :class="[index == 0?'details_information_line_current':'details_information_line']"></div>
                                </div>
                                <div class="details_information_text">
                                    <text :class="[index==0?'details_information_title_current':'details_information_title']">{{item.content}}</text>
                                    <text :class="[index==0?'details_information_title_current':'details_information_title']">{{item.createDate}}</text>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div>
                        <div class="details_address" v-if="orderForm.areaName !=nuderfind">
                            <div class="details_address_top">
                                <text class="details_address_name">{{orderForm.consignee}}</text>
                                <text class="details_address_phone">{{orderForm.phone}}</text>
                                <div class="details_lines" v-if="!checkPermission(['member-list'])"></div>
                                <text class="details_right_copy" @click="copyAddressClick">复制</text>
                                <div class="details_lines" v-if="checkPermission(['member-list'])"></div>
                                <text class="details_right_copyTwo" v-if="checkPermission(['member-list'])" @click="memberClick">详情</text>
                            </div>
                            <text class="details_stores_title" v-if="orderForm.shippingMethod == 1">自提点：{{shopName}}</text>
                            <div class="details_address_bottom">
                                <text class="details_address_title">{{orderForm.address}}</text>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="details_order" v-if="itemList.length !=0">
                            <div class="details_order_item" v-for="item in itemList">
                                <div class="details_order_item_img">
                                    <image style="width:170px;height:170px" :src="item.thumbnail"></image>
                                </div>
                                <div class="details_order_item_content">
                                    <div class="details_order_item_content_top">
                                        <text class="details_order_item_title">{{item.name}}</text>
                                        <div style="display: flex;flex-direction: row">
                                            <text class="details_order_red_icon">¥</text>
                                            <text class="details_order_red_font">{{item.price}}</text>
                                        </div>
                                    </div>
                                    <div class="details_order_item_content_bottom">
                                        <text class="details_order_item_subtitle">{{item.spec}}</text>
                                        <text class="details_order_item_number"> x {{item.quantity}}</text>
                                    </div>
                                </div>
                            </div>

                            <div class="details_order_item_bottom">
                                <div class="row_sb_mg20">
                                    <text class="details_order_item_bottom_titel">商品总价</text>
                                    <div style="display: flex;flex-direction: row">
                                        <text class="details_order_black_icon">¥</text>
                                        <text class="details_order_black_font">{{orderForm.subPrice}}</text>
                                    </div>
                                </div>
                                <div class="row_sb_mg20">
                                    <text class="details_order_item_bottom_titel">店铺优惠：</text>
                                    <div style="display: flex;flex-direction: row">
                                        <text class="details_order_black_icon">¥</text>
                                        <text class="details_order_black_font">{{orderForm.discount}}</text>
                                    </div>
                                </div>
                                <div class="row_sb_mg20">
                                    <text class="details_order_item_bottom_titel">运费：</text>
                                    <div style="display: flex;flex-direction: row">
                                        <text class="details_order_black_icon">¥</text>
                                        <text class="details_order_black_font">{{orderForm.freight}}</text>
                                    </div>
                                </div>
                                <div class="row_sb_mg20">
                                    <text class="details_order_item_bottom_totalTitel">实付款：</text>
                                    <div style="display: flex;flex-direction: row">
                                        <text class="details_order_red_icon">¥</text>
                                        <text class="details_order_red_font">{{orderForm.amountPayable}}</text>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div>
                        <div class="submit_payMethod" v-if="payments.length != 0">
                            <div class="submit_payMethod_Header">
                                <text class="submit_payMethod_Header_Title">支付方式</text>
                            </div>
                            <div class="submit_payMethod_Content" v-for="item in payments">
                                <div class="submit_payMethod_Content_Column">
                                    <text class="submit_payMethod_Content_Title">{{item.paymentPluginName}}</text>
                                    <text style="margin-left:10px" class="submit_payMethod_Content_Date" v-if="item.attach.quantity !=underfind && (item.paymentPluginId == 'waterTicketPayPlugin' || item.paymentPluginId == 'couponCodePayPlugin')">(抵扣{{item.attach.quantity}}张)</text>
                                </div>
                                <text class="submit_payMethod_Content_SubTitle">¥{{item.amount}}</text>
                            </div>
                        </div>
                    </div>

                    <div class="details_order_information">
                        <div class="details_information_row">
                            <text class="details_information_row_title">订单编号</text>
                            <text class="details_information_row_content">{{orderForm.sn}}</text>
                            <div class="details_information_row_line"></div>
                            <text class="details_information_row_botton" @click="copyClick">复制</text>
                        </div>
                        <div class="details_information_row">
                            <text class="details_information_row_title">下单时间</text>
                            <text class="details_information_row_content">{{orderForm.createDate}}</text>
                        </div>
                        <div class="details_information_row">
                            <text class="details_information_row_title">配送方式</text>
                            <text class="details_information_row_contentTwo">{{orderForm.shippingMethod == 0 ?'普通快递':orderForm.shippingMethod == 1?'门店自提':'同城配送'}}</text>
                        </div>
                        <div class="details_information_row" v-if="orderForm.memo != null">
                            <text class="details_information_row_title">订单备注</text>
                            <text class="details_information_row_contentTwo">{{orderForm.memo}}</text>
                        </div>
                    </div>
                    <div style="width:100%;height:100px;"></div>
                    <!-- 待付款 -->
                    <div class="details_botton" v-if="orderForm.orderStatus !=3 && orderForm.orderStatus !=2 && orderForm.orderStatus !=4">
						<div class="detaisl_botton_color_box botton_Bg_Color" @click="cancelClick" v-if="orderForm.orderStatus !=3 && orderForm.orderStatus !=2 && orderForm.orderStatus !=4">
						    <text class="details_botton_color_box_title botton_Fz_Color">关闭订单</text>
						</div>
                        <div class="detaisl_botton_color_box botton_Bg_Color" @click="returnsClick" v-if="orderForm.paymentStatus == 1 && orderForm.shippingStatus == 0 && orderForm.orderStatus == 1">
                            <text class="details_botton_color_box_title botton_Fz_Color">退货</text>
                        </div>
                        <div class="detaisl_botton_color_box botton_Bg_Color" @click="shipping" v-if="orderForm.paymentStatus == 1 && orderForm.shippingStatus == 0 && orderForm.orderStatus == 1">
                            <text class="details_botton_color_box_title botton_Fz_Color">发货</text>
                        </div>
                    </div>
                </div>
            </cell>
        </list>
    </div>

</template>

<script>
    const storage = weex.requireModule('storage')
    const modal = weex.requireModule('modal')
    import myNavbar from '../../components/myNavbar/myNavbar.vue'
    import {
        find,returns,cancel
    } from '../../api/order';
    const eeui = app.requireModule('eeui');
    const pay = app.requireModule("eeui/pay");
    export default {
        data() {
            return {
                img: 'https://icweiliimg1.pstatp.com/weili/l/540018848208912837.webp',
                orderForm: {},
                id: '',
                orderLog: '',
                currentTab: 0,
                payments: [],
                left_time: "00:00",
                timeType: false,
                itemList: [],
                timer: null,
                shopName:''
            }
        },
        created() {
            this.initIconFont()
            this.id = app.config.params
        },
        components:{
            myNavbar
        },
        mounted() {
            this.findClick(this.id)
        },
        methods: {
            findClick(data) {
                var _this = this
                find(data).then(
                    res => {
                        console.log(res)
                        if (res.type == 'success') {
                            _this.orderForm = res.data.order
                            _this.orderForm.createDate = _this.formatTime(_this.orderForm.createDate)
                            if (!this.isEmptyString(res.data.orderLog)) {
                                res.data.orderLog.forEach(function (item) {
                                    item.createDate = _this.formatTime(item.createDate)
                                })
                                _this.orderLog = res.data.orderLog
                            }
                            _this.orderForm.itemList.forEach(function (item) {
								item.quantity = parseInt(item.quantity)
								item.price = parseFloat(item.price).toFixed(2)
                                if (item.thumbnail != undefined){
                                        item.thumbnail = _this.thumbnail(item.thumbnail, 170, 170)
                                }
                            })
                            _this.itemList = _this.orderForm.itemList
                            console.log(_this.itemList)
                            res.data.payments.forEach(item=>{
                                item.attach=JSON.parse(item.attach)
                            })
                            _this.payments = res.data.payments;
                            _this.shopName = res.data.shopName
                        }
                    }
                ).catch(error => {
                })
            },
            copyClick() {
                eeui.copyText(this.orderForm.sn)
                eeui.toast('复制成功')
            },
            shipping(){
				if(this.checkPermission(['saleout.add'])==false){
					eeui.alert('您没有发货权限', function() {
					});
                    return
				}
                var _this = this
                eeui.openPage({
                    url: 'root://pages/order/button/orderShipping.js',
                    params: _this.orderForm.id,
                    statusBarType: 'immersion',
                    statusBarStyle: false
                },result => {
                    if (result.status == 'stop')  {
                        storage.getItem('orderShipping', event => {
                            if (event.data == 'true'){
                                this.findClick(this.id)
                            }
                        })
                    }
                })
            },
            returnsClick() {
                if(this.checkPermission(['salein.add'])==false){
                    eeui.alert('您没有退货权限', function() {
                    });
                    return
                }
                var _this = this
                console.log(_this.getGlobalData().token)
                eeui.confirm({
                    title: "温馨提示",
                    message: "你确定退货吗？",
                    buttons: ["取消", "确定"]
                }, function(result) {
                    if (result.status == "click" && result.title == "确定") {
                        var itemList = []
                        returns(_this.orderForm.id,itemList).then(
                            res => {
                                console.log(res)
                                eeui.toast('退货成功')
                               _this.findClick(_this.id)
                            }
                        ).catch(error => {
                            console.log(error)
                        })
                    }
                });
            },
			cancelClick(){
				var _this = this
				console.log(_this.getGlobalData().token)
				eeui.confirm({
				    title: "温馨提示",
				    message: "你确定关闭吗？",
				    buttons: ["取消", "确定"]
				}, function(result) {
				    if (result.status == "click" && result.title == "确定") {
				        var itemList = []
				        cancel(_this.orderForm.id).then(
				            res => {
				                console.log(res)
				                eeui.toast('关闭成功')
				               _this.findClick(_this.id)
				            }
				        ).catch(error => {
				            console.log(error)
				        })
				    }
				});
			},
            copyAddressClick(){
                eeui.toast('复制成功')
                eeui.copyText(this.orderForm.consignee + this.orderForm.phone + this.orderForm.address)
            },
            memberClick(){
                var _this = this
                eeui.openPage({
                    url: 'root://pages/member/memberInfo/memberInfo.js',
                    params: _this.orderForm.memberId,
                    statusBarType: 'immersion',
                    statusBarStyle: false
                },result => {

                })
            }
        }
    }
</script>
<style lang="css" src="../../style/wx.css"/>
<style scoped>
    .app, body {
        background-color: rgba(248, 248, 248, 0.8);
    }
    .app{
        flex: 1;
    }
    .details_box_header_bg {
        width: 750px;
        height: 560px;
        background-image: linear-gradient(to bottom, rgba(194, 194, 194,0.8), rgba(248, 248, 248, 1));
        position: absolute;
        top: 0;
    }


    .details_status {
        padding-left: 30px;
        padding-right: 50px;
        box-sizing: border-box;
        z-index: 0;
        margin-top: 40px;
        display: flex;
        flex-direction: row;
        align-items: flex-end;
    }

    .details_status_title {
        font-size: 44px;
        font-weight: 600;
        color: rgba(0, 0, 0, 0.5);
        /*line-height: 56px;*/
    }

    .details_status_subtitle {
        font-size: 24px;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.3);
        margin-left: 25px;
        margin-bottom: 2px;
    }


    .title2 {
        color: gray;
        font-size: 36px;
        font-family: iconfont2;
        margin: 0 20px;
        color: #cccccc;
    }
    .details_address {
        width: 700px;
        background-color: rgba(255, 255, 255, 1);
        border-radius: 16px;
        margin-left: 25px;
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-top: 25px;
        padding-left: 25px;
        padding-right: 25px;
        padding-bottom: 25px;
        box-sizing: border-box;
    }

    .details_address_top {
        margin-bottom: 10px;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .details_address_name {
        font-size: 28px;
        font-weight: 500;
        color: rgba(26, 26, 30, 1);
    }

    .details_address_phone {
        font-size: 28px;
        font-weight: 500;
        color: rgba(26, 26, 30, 1);
        margin-left: 10px;
    }

    .details_address_bottom {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .details_address_title {
        font-size: 24px;
        font-weight: 400;
        width: 570px;
        color: rgba(26, 26, 30, 1);
    }

    .details_address_label {
        /*width: 66px;*/
        /*height: 34px;*/
        border-style: solid;
        border-width: 2px;
        border-color: rgba(235, 89, 79, 1);
        border-radius: 2px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .details_address_label_box {
        width: 66px;
        height: 34px;
        background-color: rgba(235, 89, 79, 1);
        border-style: solid;
        border-width: 1px;
        border-color: white;
        border-radius: 2px;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
    }

    .details_address_label_title {
        font-size: 18px;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
    }

    .details_order {
        width: 700px;
        background-color: rgba(255, 255, 255, 1);
        border-radius: 16px;
        margin-left: 25px;
        margin-top: 20px;
        padding-top: 40px;
        padding-bottom: 30px;
        padding-left: 25px;
        padding-right: 25px;
        box-sizing: border-box;
    }

    .details_order_item {
        display: flex;
        flex-direction: row;
        margin-bottom: 40px;
    }

    .details_order_item_img {
        width: 170px;
        height: 170px;
        background-color: rgba(250, 250, 250, 1);
        border-radius: 4px;
        overflow: hidden;
    }

    .details_order_item_content {
        display: flex;
        flex-direction: column;
        width: 460px;
        margin-left: 20px;
        position: relative;
    }

    .details_order_item_content_top {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
    }

    .details_order_item_title {
        font-size: 28px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 42px;
        text-overflow: ellipsis;
        lines: 1;
        width: 370px;
    }


    .details_order_item_content_bottom {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }

    .details_order_item_subtitle {
        font-size: 24px;
        font-weight: 400;
		lines:2;
		text-overflow: ellipsis;
		width: 380px;
        color: rgba(26, 26, 30, 1);

    }

    .details_order_item_number {
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
        opacity: 0.5;
    }

    .details_order_item_bottom {
        padding-top: 40px;
        border-top-color: rgba(232, 234, 237, 1);
        border-top-width: 1px;
        border-top-style: solid;
    }

    .row_sb_mg20 {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }

    .details_order_item_bottom_titel {
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
    }


    .details_order_item_bottom_totalTitel {
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
    }


    .details_order_red_icon {
        font-size: 20px;
        font-weight: 500;
        color: rgba(231, 91, 83, 1);
        line-height: 42px;
    }

    .details_order_red_font {
        font-size: 28px;
        font-weight: 500;
        color: rgba(231, 91, 83, 1);
        line-height: 42px;
    }

    .details_order_black_icon {
        font-size: 20px;
        font-weight: 500;
        color: black;
        line-height: 42px;
    }

    .details_order_black_font {
        font-size: 28px;
        font-weight: 500;
        color: black;
        line-height: 42px;
    }

    .details_order_information {
        width: 700px;
        padding: 40px 25px 10px 25px;
        border-radius: 16px;
        background-color: white;
        box-sizing: border-box;
        margin-left: 25px;
        margin-top: 20px;
        margin-bottom: 30px;
    }


    .details_information {
        width: 700px;
        margin-left: 25px;
        background-color: white;
        border-radius: 16px;
        margin-top: 30px;
        padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 20px;
        padding-right: 20px;
        box-sizing: content-box;
    }

    .details_information_title {
        display: block;
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
        opacity: 0.5;
    }

    .details_information_title_current {
        display: block;
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
        opacity: 0.8;
    }

    .details_information_left {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .details_information_line {
        width: 1px;
        height: 50px;
        box-sizing: border-box;
        border-left-width: 2px;
        border-left-style: solid;
        border-left-color: rgba(0, 0, 0, 0.2);
    }

    .details_information_line_current {
        width: 1px;
        height: 50px;
        border-left-color: rgba(237, 86, 75, 0.719);
        border-left-style: dashed;
        border-left-width: 2px;
        box-sizing: border-box;
    }
	.submit_payMethod_Content_Date {
	  font-size: 24px;
	  font-weight: 400;
	  color: rgba(26, 26, 30, 0.3);
	  line-height: 36px;
	  /* display: block; */
	  /* margin-top: 10rpx; */
	}
    .details_information_round {
        width: 50px;
        height: 50px;
        border-width: 1px;
        border-style: solid;
        border-color: rgba(0, 0, 0, 0.5);
        border-radius: 50%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .details_information_round_current {
        width: 50px;
        height: 50px;
        background-image: linear-gradient(129deg, rgba(237, 86, 75, 0.719), rgb(247, 150, 120));
        border-radius: 50%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .details_information_icon {
        font-family: iconfont2;
        font-size: 20px;

        color: rgba(0, 0, 0, 0.5);
    }

    .details_information_icon_current {

        font-family: iconfont2;
        font-size: 20px;
        color: white;
    }

    .details_information_content {
        display: flex;
        flex-direction: row;
    }

    .details_information_text {
        padding-left: 20px;
        display: flex;
        flex-direction: column;
        padding-top: 10px;
    }

    .details_information_row {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        margin-bottom: 30px;
    }

    .details_information_row_title {
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        opacity: 0.5;
        margin-right: 40px;
    }

    .details_information_row_content {
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
    }

    .details_information_row_contentTwo{
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        width: 520px;
    }

    .details_information_row_botton {
        font-size: 24px;
        font-weight: 400;
        color: rgba(103, 130, 192, 1);
    }

    .details_information_row_line {
        width: 1px;
        height: 24px;
        background-color: rgba(232, 234, 237, 1);
        margin-left: 20px;
        margin-right: 20px;
    }

    .submit_payMethod {
        width: 690px;
        padding: 25px;
        box-sizing: border-box;
        margin-left: 30px;
        margin-top: 30px;
        background-color: white;
        border-radius: 16px;
    }

    .submit_payMethod_Header_Title {
        font-size: 32px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
    }

    .submit_payMethod_Content {
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        align-items: center;
        margin-top: 20px;
    }

    .submit_payMethod_Content_Column {
        display: flex;
        flex-direction: row;
    }

    .submit_payMethod_Content_Title {
        font-size: 28px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        /* display: block; */
    }

    .submit_payMethod_Content_SubTitle {
        font-size: 24px;
        font-weight: 400;
        color: rgba(231, 91, 83, 1);
        display: block;
    }

    .orderDate {
        display: block;
        margin-top: 20px;
        color: white;
        font-size: 30px;
        letter-spacing: 2px
    }
    .details_botton {
        width: 750px;
        height: 94px;
        background-color: rgba(255, 255, 255, 1);
        border-top-width: 1px;
        border-top-style: solid;
        border-top-color: rgba(0, 0, 0, 0.05);
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        position: fixed;
        bottom: 0;
    }

    .detaisl_botton_color_box {
        width: 160px;
        height: 56px;
        opacity: 0.8;
        border-radius: 4px;
        margin-right: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .details_botton_color_box_title {
        font-size: 24px;
        font-weight: 400;
        line-height: 56px;
    }
    .details_lines{
        width: 2px;
        height: 28px;
        background-color: rgba(0,0,0,0.2);
        margin-left: 20px;
    }
    .details_right_copy{
        font-size: 28px;
        color: red;
        margin-left: 20px;
    }
    .details_right_copyTwo{
        font-size: 28px;
        color: rgba(0,0,0,0.4);
        margin-left: 20px;
    }
    .details_stores_title{
        font-size: 28px;
        color: red;
        margin-bottom: 10px;
    }
</style>
